import React, {Component} from 'react';
import Global from '../utils/Global';
const {width} = Dimensions.get('window');
import {Image, Dimensions,StyleSheet, Text, TouchableHighlight, View,} from 'react-native';

export default class ListItem extends Component {
  render() {
    return (
      <View>
        <TouchableHighlight underlayColor={Global.touchableHighlightColor} onPress={this.props.handleClick}>
          <View style={listItemStyles.container}>
            <Image style={listItemStyles.icon} source={this.props.icon}/>
            <View style={listItemStyles.menuContainer}>
              <Text style={listItemStyles.menuText}>{this.props.text}</Text>
            </View>
            <View style={listItemStyles.arrowStyle}>
                <Image style={listItemStyles.arrow}
                       source={require('../../images/other/arrow.png')}/>
            </View>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const listItemStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
      // height:width/8,
      padding:30
  },
  icon: {
    width:20,
    height:20,
  },
  arrowStyle:{
      position: "absolute",
      right:20
  },
  arrow:{
      width:12,
      height:12
  },
  menuContainer: {
    paddingLeft: 15,
    paddingRight:15,
  },
  menuText: {
    color:'#333333',
    fontSize:15,
  }
});
